<!DOCTYPE html>
<html>
	<head>
		<tal:block metal:use-macro="../macros.tpl.php/headScripts" />
		<script src="/js/expense_add.js"></script>
	</head>
	<body>
		<div id='container'>
            <tal:block metal:use-macro="../macros.tpl.php/header_inner" />

			<h1>${title}</h1>
			<tal:block tal:condition="not: login">
				<center><span style="color:red;">Only login user can view this page. click <a href="/login/">here</a> to login</span></center>
			</tal:block>
			<tal:block tal:condition="login">
				<form method="post">
					<table align="center">
						<thead>
							<tr align="center"><th colspan="2">Add Expense</th></tr>
						</thead>
						<tbody>
							<tr>
								<td>Team:</td>
								<td>
									<select name="teamId">
										<option value="">Select</option>
										<option tal:repeat="team teams" value="${team/id}">${team/name}</option>			
									</select>									
								</td>
							</tr>
							<tr style="display: none;">
								<td>Members:</td>
								<td id="members"></td>
							</tr>
							<tr style="display: none;">
								<td>Spend By:</td>
								<td id="spendBy"></td>
							</tr>
							<tr>
								<td>Expense Detail:</td>
								<td><textarea name="description" type="text" placeholder="Enter Group Name"></textarea></td>
							</tr>
							<tr>
								<td>Spend Amount:</td>
								<td><input name="money" type="text" placeholder="Enter amount given" /></td>
							</tr>
							<tr>
								<td colspan="2" align="center"><button name="addExpenseBtn" type="submit">Save</button></td>
							</tr>
						</tbody>
						<tfoot tal:condition="message">
							<tr align="center">
								<td colspan="2" style="color:red;font-weight: bold;">${message}</td>
							</tr>
						</tfoot>
						<tfoot tal:condition="not: message">
							<tr align="center">
								<td colspan="2" style="color:red;font-weight: bold;" id="formMsg"></td>
							</tr>
						</tfoot>
					</table>
				</form>
			</tal:block>

		    <tal:block metal:use-macro="../macros.tpl.php/footer" />
		</div>
	</body>
</html>
